<template>
  <el-dialog
    v-model="visibility"
    :title="props.rowData.id ? config.button.text.edit : config.button.text.add"
    width="60%"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      :label-width="config.form.label.width"
      status-icon>
      <el-row>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="米厂"
            prop="baseRiceBarnId">
            <el-select
                v-model="formData.baseRiceBarnId"
                v-loading="riceFactoryLoading"
                placeholder="米厂"
                filterable
                clearable>
              <el-option
                  v-for="item in riceFactorySimpleNameList"
                  :key="item.id"
                  :disabled="item.disabled"
                  :label="item.simple_name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="袋皮"
              prop="bagInfoId">
            <el-select
                v-model="formData.bagInfoId"
                v-loading="bagInfoFactoryLoading"
                placeholder="袋皮"
                filterable
                clearable>
              <el-option
                  v-for="item in bagInfoSimpleNameList"
                  :key="item.id"
                  :disabled="item.disabled"
                  :label="item.simple_name"
                  :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="商品全称"
              prop="fullName">
            <el-input
                v-model="formData.fullName"
                clearable
                placeholder="商品全称"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="商品简称"
              prop="simpleName">
            <el-input
                v-model="formData.simpleName"
                clearable
                placeholder="商品简称"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="商品品种"
              prop="variety">
            <el-input
                v-model="formData.variety"
                clearable
                placeholder="商品品种"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="商品地区"
              prop="region">
            <el-input
                v-model="formData.region"
                clearable
                placeholder="商品地区"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="备注信息"
              prop="region">
            <el-input
                v-model="formData.remark"
                type="textarea"
                clearable
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="备注信息"></el-input>
          </el-form-item>
        </el-col>
        <el-col
            :span="12"
            class="el_col_fit">
          <el-form-item
              label="SKU"
              prop="sku">
            <el-input
                v-model="formData.sku"
                clearable
                placeholder="SKU"></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="el_col_fit">
          <el-form-item
            label="启用状态"
            prop="isEnable">
            <el-select
              v-model="formData.isEnable"
              placeholder="选择"
              clearable>
              <el-option
                :label="config.button.text.enable"
                :value="true" />
              <el-option
                :label="config.button.text.stop"
                :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
        <el-button
          type="primary"
          @click="saveEvent">
          {{ config.button.text.save }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import ApiBaseRiceBarnGoods from "@/api/modules/base-rice-barn-goods"
import { useValidator } from "@/hooks/useValidator";

const visibility = ref(false)
const formData = ref({})
const formRef = ref()
const { required, validate, clearValidate } = useValidator()
const riceFactorySimpleNameList = ref([])
const bagInfoSimpleNameList = ref([])
const riceFactoryLoading = ref(false)
const bagInfoFactoryLoading = ref(false)

const formRules = {
  baseRiceBarnId: [required("米厂")],
  bagInfoId: [required("袋皮")],
  fullName: [required("商品全称")],
  simpleName: [required("商品简称")],
  sku: [required("SKU")],
  isEnable: [required("启用状态", "change")],
}

const props = defineProps(["rowData"])

const emits = defineEmits(["save"])

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    if (!props.rowData.id) {
      formData.value = {
        ...props.rowData,
        isEnable: true,
      };
    } else {
      formData.value = { ...props.rowData };
    }
    getRiceFactorySimpleNameList()
    getBagInfoSimpleNameList()
    setTimeout(() => {
      clearValidate(formRef.value)
    })
  }
}, { immediate: true })

const saveEvent = async () => {
  await validate(formRef.value)
  if (formData.value.id) {
    await ApiBaseRiceBarnGoods.update(formData.value)
  } else {
    await ApiBaseRiceBarnGoods.insert(formData.value)
  }
  emits("save")
}

//获取米厂简称列表
const getRiceFactorySimpleNameList = async () => {
  riceFactoryLoading.value = true
  const orgObj = {
    id:formData.value.baseRiceBarnId,
    simple_name:formData.value.baseRiceBarnSimpleName,
    disabled:true
  }
  const data = await ApiBaseRiceBarnGoods.getSimpleNameList('/baseRiceBarn/')
  riceFactorySimpleNameList.value = data.data
  const findItem = data.data.find(item=>item.id===orgObj.id);
  if(!findItem&&props.rowData.id){
    orgObj.simple_name+='(已禁用)'
    riceFactorySimpleNameList.value.push(orgObj);
  }
  riceFactoryLoading.value = false
}

//获取袋皮简称列表
const getBagInfoSimpleNameList = async () => {
  bagInfoFactoryLoading.value = true
  const orgObj = {
    id:formData.value.bagInfoId,
    simple_name:formData.value.bagInfoSimpleName,
    disabled:true
  }
  const data = await ApiBaseRiceBarnGoods.getSimpleNameList('/bagInfo/')
  bagInfoSimpleNameList.value = data.data
  const findItem = data.data.find(item=>item.id===orgObj.id);
    if(!findItem&&props.rowData.id){
      orgObj.simple_name+='(已禁用)'
      bagInfoSimpleNameList.value.push(orgObj);
    }
  bagInfoFactoryLoading.value = false
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped></style>
